<template>
  <div class="myDeal">
    <header-bar title="我的交易" :slideIn="slideIn"></header-bar>
    <div class="tabs">
      <div class="tab-item" @click="changeTab(0)">
        <span>我发布的</span>
        <div :class="{'tab-active':currentTab==0}"></div>
      </div>
      <div class="tab-item" @click="changeTab(1)">
        <span>已卖出的</span>
        <div :class="{'tab-active':currentTab==1}"></div>
      </div>
      <div class="tab-item" @click="changeTab(2)">
        <span>我买到的</span>
        <div :class="{'tab-active':currentTab==2}"></div>
      </div>
    </div>
    <pull-refresh
      :bottom="panelBottom"
      ref="pullRefreshPanel"
      id="scrollDeal"
      :background-color="'#f6f6f6'"
      :top="headerHeight"
      :enableRefresh="true"
      @refresh="refreshData"
    >
        <orderList :list="listData" :type="currentTab" @priceReduction="priceReduction" @reload="reload" @payModel="payModel"></orderList>
        <div class="no_data_block" v-if="listData.length == 0 &&!isLoading&&!tabLoading">
          <no-data-panel :tipsData="tipsData">
            <div class="min_btn_green_border" @click="addGoods" slot="btns" v-if="currentTab==0">立即发布</div>
          </no-data-panel>
        </div>
        <div>
          <infinite-load
            v-if="listData.length > 0"
            :scroll-target="scrollTarget"
            :is-loading="isLoading"
            :tipsShow="tipsShow"
            :is-nomore="isNomre"
            @load="getNextData"
          ></infinite-load>
        </div>
    </pull-refresh>
    <div class="price-model" v-if="model">
        <div class="price-body">
          <img src="~@/assets/imgs/common/close_icon2.png" @click="model=false">
          <div class="top-goods">
            <img :src="goods.icon">
            <div class="top-right">
              <div class="now-price">
                <div class="now-title">　现价：</div>
                <div class="now-unit">¥</div>
                <div class="now-amount">{{goods.price}}</div>
              </div>
              <div class="new-price">
                <div class="new-title">降价至：</div>
                <div class="new-unit">¥</div>
                <input v-model="price" @focus="priceInputFocus(price,0)" @blur="priceInputBlur" @keydown="priceInputKeyDown" type="number">
              </div>
            </div>
          </div>
          <ul class="amonut-items">
            <li :class="current==8?'amount-active':''" @click="tab((goods.price*0.8).toFixed(2),8)">
              <div class="amount">
                <span>¥</span>
                {{(goods.price*0.8).toFixed(2)}}
              </div>
              <div class="name">
                <span>打8折</span>
              </div>
              <img v-if="current==8" src="~@/assets/imgs/account/hook.png" class="active-box" />
            </li>
            <li :class="current==7?'amount-active':''" @click="tab((goods.price*0.7).toFixed(2),7)">
              <div class="amount">
                <span>¥</span>
                {{(goods.price*0.7).toFixed(2)}}
              </div>
              <div class="name">
                <span>打7折</span>
                <span>有竞争力</span>
              </div>
              <img v-if="current==7" src="~@/assets/imgs/account/hook.png" class="active-box" />
            </li>
            <li :class="current==6?'amount-active':''" @click="tab((goods.price*0.6).toFixed(2),6)">
              <div class="amount">
                <span>¥</span>
                {{(goods.price*0.6).toFixed(2)}}
              </div>
              <div class="name">
                <span>打6折</span>
                <span>出手快</span>
              </div>
              <img v-if="current==6" src="~@/assets/imgs/account/hook.png" class="active-box" />
            </li>
            <li :class="current==5?'amount-active':''" @click="tab((goods.price*0.5).toFixed(2),5)">
              <div class="amount">
                <span>¥</span>
                {{(goods.price*0.5).toFixed(2)}}
              </div>
              <div class="name">
                <span>打5折</span>
                <span>极速卖</span>
              </div>
              <img v-if="current==5" src="~@/assets/imgs/account/hook.png" class="active-box" />
            </li>
          </ul>
          <div class="btns">
            <button :class="!price?'disabled':''" @click="submit">确定</button>
          </div>
        </div>
    </div>
    <payModel :visible.sync="popVisible" @payType="payType"></payModel>
  </div>
</template>
<script>
import HeaderBar from "@/components/header.vue";
import { mapState, mapActions } from "vuex";
import PullRefresh from "@/components/pullRefresh.vue";
import infiniteLoad from "@/components/infiniteLoad.vue";
import orderList from "./orderList";
import payModel from './payModel';
import native from '@/libs/native';
export default {
  components: {
    HeaderBar,
    PullRefresh,
    infiniteLoad,
    orderList,
    payModel
  },
  data() {
    return {
      currentTab: -1,
      listData: [],
      panelBottom: 0,
      scrollTarget: "#scrollDeal",

      isLoading: false,
      isNomre: false,
      tipsShow: true,
      model:false,
      page:{
        size:10,
        current:1,
      },
      queryBody:{
        type:""
      },
      goods:{

      },
      price:'',
      current:0,
      slideIn:'1',
      tabLoading:false,

      isFocusing:false,
      scrollTopFlag:0,
      popVisible:false,
      itemData:{},
    };
  },
  created() {
    //是否关闭webview
    this.slideIn = this.$route.query.slideIn||'1';
    let currentTab = '';
    //选择tab
    if(this.$route.query.type){
      currentTab = this.$route.query.type*1;
    }else{
      currentTab = 0;
    }
    this.changeTab(currentTab);
  },
  computed: {
    ...mapState({
      headerHeight: state => state.headerHeight+.88
    }),
    tipsData(){
      if(this.currentTab==0){
        return {
          text:'还未发布商品',
        }
      }else if(this.currentTab==1){
        return {
          text:'还未卖出商品',
        }
      }else if(this.currentTab==2){
        return {
          text:'还未买到商品',
        }
      }
    }
  },
  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
    changeTab(current) {
      if(current==this.currentTab){
        return false;
      }
      this.currentTab = current;
      
      this.replaceParamVal('type',current);
      this.loadData();
    },
    loadData(){
      this.tabLoading = true;
      this.listData = [];
      if(this.currentTab==0){
        this.toggleLoading({flag:true});
        this.page.current = 1;
        this.getPublishList(()=>{
          this.toggleLoading({flag:false});
          this.tabLoading = false;
        })
      }else if(this.currentTab==1){
        this.toggleLoading({flag:true});
        this.queryBody.type='SELL';
        this.page.current = 1;
        this.getOrderList(()=>{
          this.toggleLoading({flag:false});
          this.tabLoading = false;
        })
      }else if(this.currentTab==2){
        this.toggleLoading({flag:true});
        this.queryBody.type='BUY';
        this.page.current = 1;
        this.getOrderList(()=>{
          this.toggleLoading({flag:false});
          this.tabLoading = false;
        })
      }
    },
    //url参数
    replaceParamVal(paramName,replaceWith) {
        let oUrl = location.href.toString();
        let re=eval('/('+ paramName+'=)([^&]*)/gi');
        let nUrl = oUrl.replace(re,paramName+'='+replaceWith);
    　　 window.location.replace(nUrl);
    },
    getPublishList(done){
      this.$ajax.publishList({queryBody:{},page:this.page}).then(res=>{
        if(done){
            done();
        }
        if(res.code=='0000'){
            if(this.page.current==1){
                this.listData = res.data.records;
            }else{
                this.listData = this.listData.concat(res.data.records);
            }
            if(res.data.records.length!=10){
                this.isNomre = true;
            }else{
               this.isNomre = false;
            }
        }
      })
    },
    getOrderList(done){
      this.$ajax.orderList({queryBody:this.queryBody,page:this.page}).then(res=>{
        if(done){
            done();
        }
        if(res.code=='0000'){
            if(this.page.current==1){
                let intervaNumS = sessionStorage.getItem('countDownIntervaNumS');
                if(intervaNumS){
                  intervaNumS = JSON.parse(intervaNumS);
                }else{
                  intervaNumS = [];
                }
                intervaNumS.forEach(item => {
                  clearInterval(item)
                });
                sessionStorage.removeItem('countDownIntervaNumS')
                this.listData = res.data.records;
            }else{
                this.listData = this.listData.concat(res.data.records);
            }
            if(res.data.records.length!=10){
                this.isNomre = true;
            }else{
               this.isNomre = false;
            }
        }
      })
    },
    refreshData(done) {
        this.page.current=1;
        if(this.currentTab!=0){
          this.getOrderList(done);
        }else{
          this.getPublishList(done);
        }
    },
    getNextData() {
        this.page.current++;
        this.isLoading = true;
        if(this.currentTab!=0){
          this.getOrderList(()=>{
              this.isLoading = false;
          });
        }else{
          this.getPublishList(()=>{
              this.isLoading = false;
          });
        }
    },
    //降价
    priceReduction(data){
      this.model = true;
      this.current = 0;
      this.price = "";
      this.goods = data;
    },
    tab(data,current){
      this.price = data;
      this.current = current;
    },
    submit(){
      if(!this.price){
        return false;
      }
      if(parseFloat(this.price)<0.1){
        this.showMsg({ content: '降价金额需大于0.1元' });
        return false;
      }
      this.toggleLoading({flag:true});
      this.$ajax.appGoodsUpdatePrice({id:this.goods.id,price:this.price,discount:this.current}).then(res=>{
        this.toggleLoading({flag:false});
        if(res.code=='0000'){
          this.showMsg({ content: '降价成功' });
          this.changeTab(this.currentTab);
          this.model = false;
        }
      })
    },
    reload(){
      this.loadData();
    },
    //添加商品
    addGoods(){
      this.$router.push({path:'uploadGoods',query:{'originType':'h5'}});
    },
    priceInputFocus(data,current) {
      this.tab(data,current);
      this.isFocusing = true;
    },
    priceInputBlur() {
      this.isFocusing = false;
    },
    priceInputKeyDown(e){
      if(e.keyCode == 190){
        if(!this.price){
          e.preventDefault();
        };
        if(this.price && this.price.indexOf('.') != -1){
          e.preventDefault();
        }
      }
    },
    //支付方式
    payType(type){
      this.popVisible = false;
      native.goPay(this.itemData.id,type).then(res=>{
          this.reload();
      });
    },
    //支付框
    payModel(data){
      this.itemData = data;
      this.popVisible = true;
    },
  },
  watch:{
    isFocusing: function (val) {
        if (val) {
            this.scrollTopFlag = document.body.scrollTop;
        } else {
            document.body.scrollTop = this.scrollTopFlag;
        }
    },
    price(newVal,oldVal){
      let S = newVal + '';
      if(S.indexOf('.') != -1){
          let numArr = S.split('.');
          if(numArr[0].length > 8){
              numArr[0] = numArr[0].slice(0,8);
          };
          if(numArr[1] && numArr[1].length > 2){
            numArr[1] = numArr[1].slice(0,2);
          };
          S = numArr.join('.');
      }else{
          if(S.length > 8){
             S = S.slice(0,8);
          }
      };
      this.price = S;
    }

  }
};
</script>
<style lang="less" scoped>
.myDeal {
  min-height: 100%;
  background: #f6f6f6;
  .no_data_block{
    padding-top: 1.6rem;
    .min_btn_green_border{
      width: 3rem;
      height: .84rem;
      border-radius: .84rem;
      border:.02rem solid #14C878;
      color: #14C878;
      font-size: .32rem;
      font-weight:500;
      display: flex;
      justify-content: center;
      align-items: center;
      margin: .6rem auto 0;
    }
  }
  .tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 0.88rem;
    background: #fff;
    .tab-item {
      flex: 1;
      font-size: 0.28rem;
      color: #333;
      text-align: center;
      height: 100%;
      line-height: 0.88rem;
      position: relative;
      .tab-active {
        position: absolute;
        bottom: 0;
        left: 50%;
        margin-left: -0.54rem;
        background: #14c877;
        width: 1.08rem;
        height: 0.06rem;
      }
    }
  }
  .price-model{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background:rgba(51,51,51,.6);
    display: flex;
    justify-content: center;
    align-items: center;
    .price-body{
      background: #fff;
      width:5.9rem;
      border-radius: .1rem;
      position: relative;
      &>img{
        width: .28rem;
        height: .28rem;
        position: absolute;
        top: .3rem;
        right: .4rem;
      }
      .top-goods{
        padding: 0 .3rem;
        display: flex;
        margin: .5rem 0 .3rem;
        align-items: center;
        img{
          width: 1.6rem;
          height: 1.6rem;
          background: #FAFAFA;
        }
        .top-right{
          margin-left: .1rem;
          .now-price{
            display: flex;
            align-items: center;
            color: #999;
            font-size: .24rem;
            .now-title{
              font-weight:400;
              font-size: .28rem;
            }
            .now-unit{
              font-weight:400;
              color: #FF4238;
            }
            .now-amount{
              font-size: .36rem;
              color: #FF4238;
              font-family: din-bold;
            }
          }
          .new-price{
            margin-top: .26rem;
            display: flex;
            align-items: center;
            color: #999;
            font-size: .24rem;
            .new-title{
              font-weight:400;
              font-size: .28rem;
            }
            .new-unit{
              font-weight:400;
              background: #EEE;
              width: .26rem;
              height: .54rem;
              border-radius:.04rem .04rem 0 0;
              display: flex;
              align-items: center;
              justify-content: flex-end;
              color: #333;
            }
            input{
              width: 1.74rem;
              height: .54rem;
              background: #EEE;
              border-radius:0 0 .04rem .04rem;
              padding-left: .04rem;
              color: #333;
              font-size: .36rem;
              font-family: din-bold;
            }
          }
        }
        
      }
      .amonut-items{
        display: flex;
        flex-flow:wrap;
        justify-content: space-between;
        padding: 0 .3rem;
        li{
          
          width:2.5rem;
          height:1.2rem;
          background:#EEE;
          border-radius:.1rem;
          color: #666;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          margin-bottom: .3rem;
          .amount{
            font-size: .36rem;
            color: #333;
            font-family: din-bold;
            span{
              font-weight:400;
              font-size:.24rem;
            }
          }
          .name{
            font-weight:400;
            span{

            }
          }
          &.amount-active{
            border:.04rem solid #14C878;
            position: relative;
            .active-box{
              position: absolute;
              right: -.04rem;
              bottom: -.04rem;
              width: .44rem;
              height: .44rem;
            }
          }
        }
      }
      .btns{
        display: flex;
        justify-content: center;
        align-items: center;
        button{
          margin: .2rem 0 .4rem;
          font-size: .32rem;
          color: #14C878;
          width: 4.7rem;
          height: .84rem;
          border-radius: .84rem;
          background: #14C878;
          color: #fff;
          &.disabled{
            opacity: 0.2;
          }
        }
      }
    }
  }
}
</style>